<template>
  <div class="app-container home">
    <!-- 用来页面切换 -->
    <div v-show="flag">
      <!-- 表单组件 -->
      <form-data />

      <!-- 新增短信、短信模板 -->
      <el-row
        style="margin-top: 30px; padding-right: 22px"
        type="flex"
        justify="end"
      >
        <el-button style="background: #2f72db; color: white" @click="showModule"
          >新增短信</el-button
        >
        <el-button
          style="background: #ebf0fc; color: #799de2; border: 1px solid #6d89b3"
          @click="showTpl"
          >模板管理</el-button
        >
      </el-row>

      <!-- 数据 -->
      <div style="border: 1px solid #f0f0f2; margin-top: 10px">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          :header-cell-style="{ background: '#eef2f5' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          />
          <el-table-column
            prop="name"
            label="接收人"
            width="100"
            align="center"
          />
          <el-table-column
            prop="date"
            label="手机号码"
            width="180"
            align="center"
          />
          <el-table-column
            prop="date"
            label="模板类型"
            width="180"
            align="center"
          />
          <el-table-column prop="date" label="短信内容" align="left" />
          <el-table-column
            prop="date"
            label="发送时间"
            width="180"
            align="center"
          />
          <el-table-column prop="date" label="操作" width="180" align="center">
            <el-button type="text">查看</el-button>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row
          type="flex"
          justify="end"
          style="background: #eef1f7; padding: 5px 20px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, prev, pager, next,sizes,jumper"
            :total="400"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>

    <div v-show="!flag">
      <component :is="noteModule" :flag.sync="flag" />
    </div>
  </div>
</template>

<script>
import FormData from "./components/form-data.vue";
import AddNote from "./components/addNote.vue";
import NoteTemplate from "./components/noteTemplate.vue";
export default {
  components: { FormData, AddNote, NoteTemplate },
  data() {
    return {
      // 页面切换
      flag: true,
      // 动态组件
      noteModule: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      currentPage4: 0,
    };
  },
  methods: {
    handleCurrentChange(index) {},
    handleSizeChange() {},
    // 表格自定义样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "gray-row";
      }
      return "";
    },
    // 切换组件
    showModule() {
      // 显示新增短信组件
      this.noteModule = "AddNote";
      // 隐藏当前组件
      this.flag = false;
    },
    showTpl() {
      // 显示新增短信组件
      this.noteModule = "NoteTemplate";
      // 隐藏当前组件
      this.flag = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  ::v-deep .btn-prev {
    background: none;
  }
  ::v-deep .btn-next {
    background: none;
  }
  ::v-deep .el-pager li {
    background: none;
  }
}

::v-deep .el-table .gray-row {
  background: #eef1f7;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
